<!-- 提现记录 -->
<template>
	<view class="container">
		<view class="com-detail">
			<u-tabs-swiper
				ref="uTabs"
				:bar-style="barStyle"
				:fontSize="tabOptions['font-size']"
				:activeColor="tabOptions['active-color']"
				:inactiveColor="tabOptions['inactive-color']"
				:barWidth="tabOptions['bar-width']"
				:bgColor="tabOptions['bg-color']"
				:gutter="tabOptions.gutter"
				:list="list"
				:current="current"
				@change="tabsChange"
				:is-scroll="false"
				swiperWidth="750"
			/>

			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(tab, tabIndex) in list" :key="tabIndex">
					<scroll-view scroll-y style="height: 100%; width: 100%">
						<!--  @scrolltolower="onreachBottom" -->
						<view class="content">
							<!-- <view class="content-item" v-for="(item, index) in dataList" :key="index">
                <view class="title" :class="{ title_active: item.expand }" @click="expand(item)">
                  <u-icon name="arrow-right" class="arrow-right"></u-icon>
                  <text>{{ item.title + "（点击展开）" }}</text>
                </view>
          
              </view> -->
							<view class="proxy">
								<view class="proxy-item" v-for="(proxy, idx) in dataList" :key="idx">
									<view class="proxy-box">
										<view class="proxy-left">
											<image :src="proxy.coverImage" mode="scaleToFill" />
										</view>
										<view class="proxy-right">
											<!-- <view class="proxy-title">代理名称：{{ proxy.name }}</view> -->
											<view class="join">研学：{{ proxy.specName }}</view>
											<view class="time">{{ proxy.specValue }}</view>
											<view class="team">
												<view class="team-left">
													<text>带队老师：{{ proxy.leaderAmount }}人</text>
													<text>学员：{{ proxy.nowAmount }}人</text>
												</view>
												<view
													:class="{ 'team-right_active': proxy.expand, 'team-right': true }"
													@click="expand(proxy)"
												>
													<text> {{ proxy.expand ? '点击收起' : '点击展开' }}</text>
													<u-icon name="arrow-right" class="team-arrow-right"></u-icon>
												</view>
											</view>
										</view>
									</view>
									<view class="team-info" v-if="proxy.expand">
										<!-- teacher -->
										<view class="teacher-box">
											<view class="teacher-label">已绑定带队导师信息（{{ proxy.teachList.length }}人）</view>
											<view class="team-info-item" v-for="(teacher, tIdx) in proxy.teachList" :key="tIdx">
												<view class="team-info-item-top">
													<image
														:src="
															teacher.avator ||
															'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/teacher.png'
														"
														mode="scaleToFill"
													/>

													<view class="team-info-item-right-top">
														<text class="team-teacher-name">{{ teacher.name }}</text>
														<text class="team-teacher-id">身份证：{{ teacher.cardNumber }}</text>
													</view>
												</view>
												<view class="team-info-item-midd">
													<view class="midd-item">
														<view class="midd-label">性别</view>
														<view class="midd-text">{{ teacher.sex == 1 ? '男' : '女' }} </view>
													</view>
													<view class="midd-item">
														<view class="midd-label">服装尺码</view>
														<view class="midd-text">{{ teacher.clothingSize }}</view>
													</view>
													<view class="midd-item">
														<view class="midd-label">年龄</view>
														<view class="midd-text">{{ teacher.age }}</view>
													</view>
												</view>
												<view class="team-info-item-bottom">
													<view class="label">职务</view>
													<view class="text">
														<!-- <text>{{ proxy.name }}</text> -->
														<view class="tag">{{ teacher.grade }}</view>
													</view>
												</view>
											</view>
										</view>
										<!-- students -->
										<view class="student-box">
											<view class="student-label">已绑定带队导师信息（{{ proxy.studentList.length }}人）</view>
											<view class="team-info-item" v-for="(student, sIdx) in proxy.studentList" :key="sIdx">
												<view class="team-info-item-top">
													<image
														:src="
															student.avator ||
															'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/student1.png'
														"
														mode="scaleToFill"
													/>
													<view class="team-info-item-right-top">
														<text class="team-teacher-name">{{ student.name }}</text>
														<text class="team-teacher-id">身份证：{{ student.cardNumber }}</text>
													</view>
												</view>
												<view class="team-info-item-midd">
													<view class="midd-item">
														<view class="midd-label">性别</view>
														<view class="midd-text">{{ student.sex == 1 ? '男' : '女' }}</view>
													</view>
													<view class="midd-item">
														<view class="midd-label">服装尺码</view>
														<view class="midd-text">{{ student.clothingSize }}</view>
													</view>
													<view class="midd-item">
														<view class="midd-label">年龄</view>
														<view class="midd-text">{{ student.age }}</view>
													</view>
												</view>
												<view class="team-info-item-bottom">
													<view class="label">年级</view>
													<view class="text">
														<!-- <text>{{ proxy.name }}</text> -->
														<view class="tag">{{ student.grade }}</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view v-if="dataList.length == 0" style="width: 100%; text-align: center; margin-top: 200rpx">
									<image
										style="width: 500rpx"
										mode="widthFix"
										src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/images/1734702481602ONCKpkWwYg0g4d9d4ebe77ff36c5ee1a1590746db1fb.png"
									/>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
import indexApi from '@/api/yanxue/yanxue'
export default {
	data() {
		return {
			current: 0,
			swiperCurrent: 0,
			scrollTop: 0,
			list: [
				{
					name: '我的学员信息'
				},
				{
					name: '我的代理信息'
				}
			],
			tabOptions: {
				'font-size': 28,
				'active-color': '#000',
				'inactive-color': '#91929E',
				'bar-width': 106,
				'bg-color': '#fff',
				gutter: 110
			},
			barStyle: {
				'background-color': '#F95513'
			},
			dataList: []
		}
	},

	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
	onLoad() {
		this.getData()
	},
	methods: {
		getData() {
			let obj = {
				page: 1,
				rows: 999,
				type: this.current + 1
			}
			indexApi.contractList(obj).then(res => {
				let dataList = res.result.list.map(x => {
					return {
						...x,
						teachList: x.infoList.filter(k => k.userType == 1),
						studentList: x.infoList.filter(k => k.userType == 0)
					}
				})
				this.dataList = dataList
			})
		},
		tabsChange(index) {
			this.swiperCurrent = index
		},

		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx
			this.$refs.uTabs.setDx(dx)
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current
			this.$refs.uTabs.setFinishCurrent(current)
			this.swiperCurrent = current
			this.current = current
			this.getData()
		},
		expand(item) {
			this.$set(item, 'expand', !item.expand)
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background: linear-gradient(0deg, #c1f26c 0%, #ffffff 100%);
	height: 100vh;
	overflow: scroll;
}

.com-detail {
	width: 702rpx;
	height: calc(100vh - 120rpx);
	background: #ffffff;
	box-shadow: -4rpx 0rpx 19rpx 1rpx rgba(52, 52, 52, 0.15);
	border-radius: 48rpx;
	overflow: hidden;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	margin-top: 26rpx;

	.swiper-box {
		flex: 1;

		.swiper-item {
			height: 100%;

			.content {
				padding: 20rpx;

				.content-item {
					background: #fff;
					border-radius: 20rpx;
					margin-bottom: 28rpx;

					.title {
						display: flex;
						align-items: center;
						padding: 0 18rpx;

						.arrow-right {
							font-size: 24rpx;
							color: #000000;
							transition: all 0.3s;
						}

						text {
							font-family: HarmonyOS Sans SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #000000;
							padding-left: 12rpx;
						}
					}

					.title_active {
						display: flex;
						align-items: center;
						padding: 0 18rpx;

						.arrow-right {
							font-size: 24rpx;
							color: #f95513;
							// 旋转90度
							transform: rotate(90deg);
							transition: all 0.3s;
						}

						text {
							font-family: HarmonyOS Sans SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #f95513;
							padding-left: 12rpx;
						}
					}
					// .proxy {
				}
				.proxy {
					padding: 20rpx;
					height: 100%;
					transition: all 0.3s;

					.proxy-item {
						.proxy-box {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 20rpx;

							width: 648rpx;
							height: 201rpx;
							background: #ffffff;
							box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(52, 52, 52, 0.2);
							border-radius: 20rpx;
							padding: 20rpx 28rpx;

							.proxy-left {
								image {
									width: 156rpx;
									height: 156rpx;
									border-radius: 8rpx;
									margin-right: 28rpx;
								}
							}

							.proxy-right {
								flex: 1;

								.proxy-title {
									font-family: HarmonyOS Sans SC;
									font-weight: 400;
									font-size: 30rpx;
									color: #0a1629;
									line-height: 30rpx;
								}

								.join {
									font-family: HarmonyOS Sans SC;
									font-weight: 400;
									font-size: 24rpx;
									color: #0a1629;
									line-height: 24rpx;
									margin-top: 24rpx;
								}

								.time {
									font-family: HarmonyOS Sans SC;
									font-weight: 400;
									font-size: 24rpx;
									color: #91929e;
									line-height: 24rpx;
									margin-top: 16rpx;
								}

								.team {
									display: flex;
									justify-content: space-between;
									align-items: center;
									margin-top: 20rpx;

									.team-left {
										display: flex;
										align-items: center;

										text {
											font-family: HarmonyOS Sans SC;
											font-weight: 400;
											font-size: 22rpx;
											color: #91929e;
											line-height: 22rpx;
										}
									}

									.team-right_active {
										.team-arrow-right {
											transform: rotate(90deg);
										}
									}

									.team-right {
										display: flex;
										align-items: center;
										margin-left: 20rpx;

										text {
											font-family: HarmonyOS Sans SC;
											font-weight: 400;
											font-size: 23rpx;
											color: #f95513;
											margin-right: 8rpx;
											line-height: 23rpx;
										}
										.team-arrow-right {
											font-size: 24rpx;
											color: #f95513;
											transition: all 0.3s;
										}
									}
								}
							}
						}

						.team-info {
							background: #f6f6f6;
							width: 648rpx;
							height: 100%;
							background: #ffffff;
							box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(52, 52, 52, 0.2);
							border-radius: 20rpx;
							padding: 24rpx;
							margin-bottom: 36rpx;
							.teacher-box {
								margin-bottom: 36rpx;

								.team-info-item {
									border: 4rpx solid #f95513;
								}

								.teacher-label {
									font-family: HarmonyOS Sans SC;
									font-weight: 500;
									font-size: 28rpx;
									color: #111827;
									line-height: 28rpx;
								}
							}

							.student-box {
								.team-info-item {
									border: 4rpx solid #a2ff00;
								}

								.student-label {
									font-family: HarmonyOS Sans SC;
									font-weight: 500;
									font-size: 28rpx;
									color: #111827;
									line-height: 28rpx;
								}
							}

							.team-info-item {
								background: #fff;
								border-radius: 20rpx;
								margin-bottom: 20rpx;
								padding: 0 28rpx;
								width: 599rpx;
								height: 436rpx;
								background: #ffffff;
								box-shadow: 0rpx 6rpx 14rpx 0rpx rgba(0, 0, 0, 0.2);
								border-radius: 20rpx;
								margin-top: 20rpx;

								.team-info-item-top {
									display: flex;
									align-items: center;
									padding-top: 36rpx;
									padding-bottom: 26rpx;

									image {
										width: 100rpx;
										height: 100rpx;
										border-radius: 50%;
										margin-right: 20rpx;
									}
								}

								.team-info-item-right-top {
									text {
										display: block;
									}

									.team-teacher-name {
										font-family: HarmonyOS Sans SC;
										font-weight: 400;
										font-size: 28rpx;
										color: #0a1629;
										line-height: 28rpx;
									}

									.team-teacher-id {
										font-family: HarmonyOS Sans SC;
										font-weight: 400;
										font-size: 25rpx;
										color: #91929e;
										line-height: 25rpx;
										margin-top: 18rpx;
									}
								}

								.team-info-item-midd {
									display: flex;
									justify-content: space-between;
									padding: 38rpx 30rpx 0 36rpx;
									width: 524rpx;
									margin: 0 auto;
									border-top: 2rpx solid #e4e6e8;

									.midd-item {
										.midd-label {
											font-family: HarmonyOS Sans SC;
											font-weight: 400;
											font-size: 25rpx;
											color: #91929e;
											line-height: 25rpx;
											text-align: center;
										}

										.midd-text {
											font-family: HarmonyOS Sans SC;
											font-weight: 400;
											font-size: 26rpx;
											color: #0a1629;
											line-height: 26rpx;
											margin-top: 20rpx;
											text-align: center;
										}
									}
								}

								.team-info-item-bottom {
									padding-left: 36rpx;
									margin-top: 40rpx;

									.label {
										font-size: 28rpx;
										color: #666666;
										margin-right: 20rpx;
									}

									.text {
										font-family: HarmonyOS Sans SC;
										font-weight: 400;
										font-size: 26rpx;
										color: #0a1629;
										line-height: 26rpx;
										margin-top: 14rpx;
										display: flex;
										align-items: center;

										text {
											font-size: 28rpx;
											color: #666666;
										}

										.tag {
											font-family: HarmonyOS Sans SC;
											font-weight: 400;
											font-size: 19rpx;
											color: #7d8592;
											line-height: 19rpx;
											// margin-left: 20rpx;
											border-radius: 16rpx;
											border: 4rpx solid #7d8592;
											padding: 8rpx 16rpx;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
